<template>
    <a-collapse v-model:activeKey="activeKey" :bordered="false">
        <template #expandIcon="{ isActive }">
            <caret-right-outlined :rotate="isActive ? 90 : 0" />
        </template>
        <a-collapse-panel key="1" header="人力成本评估" :style="customStyle">
            <a-table :customRow="customerRow" :columns="columns" :data-source="data" bordered>
                <!-- <template #bodyCell="{ record, column, index }">
                    <template v-if="column.dataIndex === 'actions'">
                        <a @click="editTableRow(record)">编辑</a>
                        <a>删除</a>
                    </template>
                </template> -->
            </a-table>
        </a-collapse-panel>

    </a-collapse>
</template>

<script setup lang='ts'>
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
// const sharedOnCell = (_, index) => {
//     if (index === 4) {
//         return { colSpan: 0 };
//     }
// };
const activeKey = ref(['1']);
const customStyle = 'background: #fff;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';



const customerRow = (record: any) => {
    return {
        style: {
            color: '#888'
        }
    }
}



let data = reactive([
    {
        "type": "功能开发",
        "producePlatform": "基础行车",
        "produceName": "HoloSafety",
        "firstFunName": "自动紧急制动",
        "secondFunName": "前方碰撞预警FCW,自动紧急制动AEB",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础行车",
        "produceName": "HoloSafety",
        "firstFunName": "紧急车道保持",
        "secondFunName": "车道偏离预警LDW,车道偏离抑制LDP,紧急查到保持ELK",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础行车",
        "produceName": "HoloPilot Lite",
        "firstFunName": "智能远近光灯 IHBC",
        "secondFunName": "智能远近光灯 IHBC",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础行车",
        "produceName": "HoloPilot Lite",
        "firstFunName": "智能变道辅助 ILC ",
        "secondFunName": "拨杆变道ALC,推荐变道RLC",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础行车",
        "produceName": "HoloPilot Max",
        "firstFunName": "城市导航驾驶 辅助UPP",
        "secondFunName": "城市导航驾驶 辅助UPP",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础行车",
        "produceName": "HoloPilot Max",
        "firstFunName": "记忆行车 TP",
        "secondFunName": "记忆行车 TP",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础泊车",
        "produceName": "HoloParking Lite",
        "firstFunName": "自动泊车辅助 APA ",
        "secondFunName": "自动泊车辅助APA,遥控泊车辅助RPA",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"

    },
    {
        "type": "功能开发",
        "producePlatform": "基础泊车",
        "produceName": "HoloParking Lite",
        "firstFunName": "全景影像360 AVM ",
        "secondFunName": " 全景影像AVM,泊车距离控制PDC",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"
    },
    {
        "type": "功能开发",
        "producePlatform": "高阶泊车",
        "produceName": "HoloParking MAX",
        "firstFunName": "自主代客泊车 AV",
        "secondFunName": "自主代客泊车 AV",
        "adaptationClass": "Pilot",
        "devWorkTime": 128,
        "difficultyFactor": 0.5,
        "laborCost": 128,
        "projectWorkTime": 128,

        "remarks": "测试"
    },
    // {
    //     "type": "功能开发1",
    //     "producePlatform": "基础泊车1",
    //     "produceName": "HoloParking Lite1",
    //     "firstFunName": "全景影像360 AVM 2",
    //     "secondFunName": " 全景影像AVM,泊车距离控制PDC",
    //     "adaptationClass": "Pilot",
    //     "devWorkTime": 128,
    //     "difficultyFactor": 0.5,
    //     "laborCost": 128,
    //     "projectWorkTime": 128,

    //     "remarks": "测试"
    // },
    // {
    //     "type": "功能开发1",
    //     "producePlatform": "基础泊车1",
    //     "produceName": "HoloParking Lite1",
    //     "firstFunName": "全景影像360 AVM 3",
    //     "secondFunName": " 全景影像AVM,泊车距离控制PDC",
    //     "adaptationClass": "Pilot",
    //     "devWorkTime": 128,
    //     "difficultyFactor": 0.5,
    //     "laborCost": 128,
    //     "projectWorkTime": 128,

    //     "remarks": "测试"
    // },
])

const columns: TableColumnType[] = [
    {
        title: '类型',
        className: 'typeStyle',
        dataIndex: 'type',
        key: 'type',
        // className:'typeStyle',
        customCell: (record, index) => {
            // console.log('合并', record);
            return {
                style: {
                    backgroundColor: '#E6E6E6'
                },
                rowSpan: record.typeRowSpan
            }
        }
    },
    {
        title: '产品平台',
        className: 'typeStyle',
        dataIndex: 'producePlatform',
        key: 'producePlatform',
        customCell: (record, index) => {
            return {
                rowSpan: record.producePlatformRowSpan
            }
        }
    },
    {
        title: '产品名称',
        className: 'typeStyle',
        dataIndex: 'produceName',
        key: 'produceName',
        customCell: (record, index) => {
            return {

                rowSpan: record.produceNameRowSpan
            }
        }
    },
    {
        title: '一级功能名称',
        className: 'typeStyle',
        dataIndex: 'firstFunName',
        key: 'firstFunName',
    },
    {
        title: '二级功能名称',
        className: 'typeStyle',
        dataIndex: 'secondFunName',
        key: 'secondFunName',
    },
    {
        title: '人力成本评估适配类别',
        className: 'typeStyle',
        dataIndex: 'adaptationClass',
        key: 'adaptationClass',
    },
    {
        title: '标准开发公司（人*月）',
        className: 'typeStyle',
        dataIndex: 'devWorkTime',
        key: 'devWorkTime',
    },
    {
        title: '难度系数',
        className: 'typeStyle',
        dataIndex: 'difficultyFactor',
        key: 'difficultyFactor',
    },
    {
        title: '人力成本',
        className: 'typeStyle',
        dataIndex: 'laborCost',
        key: 'laborCost',
    },
    {
        title: '项目工时',
        className: 'typeStyle',
        dataIndex: 'projectWorkTime',
        key: 'projectWorkTime',
    },
    {
        title: '备注',
        className: 'typeStyle',
        dataIndex: 'remarks',
        key: 'remarks',
    },
    // {
    //     title: '操作',
    //     dataIndex: 'actions',
    //     key: 'actions',
    // },

];

// 点击编辑时触发的回调函数
const editTableRow = (row: any) => {
    console.log('行', row);

}

// 定义一个函数用来合并列表数据
/**
 * 大虚去合并列表中的某一列
 * @param key 需要合并的列的名称
 * @param tableData 列表的数据
 */
const mergeTableData = (key: string, tableData: any) => {
    for (let i = 0; i < tableData.length; i++) {
        // 对当前i所指向的这个行的key这列的数据与下一行的数据做对比
        // 定义一个变量用于存储到底有几个连续的重复的数据(加上本身，因为这个数据直接用作合并的行数，所以初始值为1)
        let sameCount = 1
        if (i === tableData.length - 1) {
            Reflect.set(tableData[i], `${key}RowSpan`, 1)
        } else {
            for (let j = i + 1; j < tableData.length; j++) {
                // console.log('测试', tableData[j][key]);
                // 判断i这行数据的key列的数据是否和下一行的数据相同，
                if (tableData[i][key] === tableData[j][key]) {
                    // 此时说明i行的key列数据与下边的某行的key列数据重复，让sameCount+1
                    sameCount++
                    // 之后所有的相同项的合并单元格的属性都是0
                    Reflect.set(tableData[j], `${key}RowSpan`, 0)
                    // 为这行数据添加一个属性，用于合并单元格
                    Reflect.set(tableData[i], `${key}RowSpan`, sameCount)
                    // 再加一步当j到了表格尾部，那么就结束循环，不然j会多加1，不利于后方控制
                    if (j === tableData.length - 1) {
                        return
                    }
                } else {
                    i = j - 1
                    sameCount = 0
                    Reflect.set(tableData[j], `${key}RowSpan`, 0)
                    break
                }

            }
        }


    }


}

onMounted(() => {
    mergeTableData('type', data)
    mergeTableData('producePlatform', data)
    mergeTableData('produceName', data)
    // console.log(data);

})

</script>

<style lang="less" scoped>
:deep(.typeStyle) {
    color: #888;
}
</style>